<template>
  <div class="left-time" v-if="dateTime.time">
    <span class="time">{{ dateTime.time }}</span>
    <span class="date">{{ dateTime.date }}</span>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import { useIntervalFn } from '@vueuse/core';
import dayjs from 'dayjs';

const weekData = ['日', '一', '二', '三', '四', '五', '六'];
const dateTime = ref({ time: '', date: '' });

function getDateTime() {
  dateTime.value.time = dayjs().format('HH:mm:ss');
  const date = dayjs().format('YYYY-MM-DD');
  const week = '星期' + weekData[dayjs().day()];
  dateTime.value.date = date + ' ' + week;
}

useIntervalFn(() => {
  getDateTime();
}, 1000);

defineComponent({ name: 'HeaderTimeIndex' });
</script>

<style scoped lang="scss">
.left-time {
  @apply w-[678px] h-[44px] absolute left-[62px] top-[28px] pl-[48px] flex items-center;
  background: url('../assets/left-time.png') no-repeat center;
  font-family: D-DIN-PRO;

  .time {
    @apply relative text-[22px] pr-[20px] inline-block w-[90px];

    &::after {
      content: '';
      @apply inline-block w-[2px] h-[14px] absolute top-1/2 right-0 -translate-y-1/2 bg-[#BAD4EC];
    }
  }

  .date {
    @apply pl-[15px] text-[16px] text-[#BAD4EC];
  }
}
</style>
